<template>
    <div class="app-container">
        <!-- 左侧的菜单容器 -->
        <div class="menu-container">
            <div class="logo-box">
                <img src="./assets/images/bandle.png" />
                <h4>班德尔城后台系统</h4>
            </div>
            <div class="menu-box">
                <router-link to="/">首页</router-link>
                <router-link to="/gm">商品管理</router-link>
                <router-link to="/om">订单管理</router-link>
                <router-link to="/fm">财务管理</router-link>
                <router-link to="/da">数据分析</router-link>
                <router-link to="/sys">系统设置</router-link>
            </div>
        </div>
        <!-- 右侧的容器 -->
        <div class="main-container">
            <div class="header-container">
                顶部
            </div>
            <div class="body-container">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
module.exports = {
    data() {
        return {
        };
    },
    methods: {
    }
};
</script>
<style scoped>
.app-container {
    width: 1000px;
    background-color: bisque;
    margin: auto;
    display: flex;
}

.menu-container {
    width: 160px;
    background-color: grey;
}

.menu-container .logo-box {
    text-align: center;
    padding: 20px 0px;
}

.menu-container .logo-box img {
    width: 50px;
}

.menu-container .menu-box a {
    display: block;
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.menu-container .menu-box a:hover {
    background-color: #CCC;
}

.main-container {
    width: 100%;
}

.header-container {
    background-color: black;
    color: white;
    height: 80px;
}

.router-link-exact-active {
    background-color: #CCC;
}
</style>